<template>
  <div class="home">
    <first :result="item" v-for="item of result" :key="item.pic" @childFn="parentFn"></first>
  </div>
</template>

<script>
import first from '../components/first'

export default {
  name: 'movie',
  components: {
    first
  },
  data(){
    return  {
      result:[]
    }
  },
  mounted(){
    let url = 'http://47.119.132.191:4000/api/movie/top250'
    this.$http.get(url).then(res=>{
      var result = res.data.res;
      result.forEach(item=>{
        item['id']=item._id;
      })
    this.result = result;
    })
  },
  methods:{
    parentFn(val){
      this.$router.push(`/moviedetail?id=${val}`)
    }
  }
}
</script>
<style  scoped>
.home{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  align-items: center;
  justify-items: center;
}
</style>